import { useEffect } from "react";
import { BrowserRouter } from "react-router-dom"; // 修改这一行
import RouterElement from "@/router";
import UserApi from "@/api/user/user-api.ts";
import NavMenu from "@/components/NavMenu";
import { useDispatch } from "react-redux";
import { setUserInfo } from "@/store/home/homeSlice";
import { createTheme, ThemeProvider } from "@mui/material/styles";

function App() {
  const theme = createTheme({
    palette: {
      primary: {
        main: "#000",
      },
    },
    // 在这里添加其他自定义样式
  });
  const dispatch = useDispatch();
  const userApi = new UserApi();
  // 获取用户信息
  const getUserInfo = async () => {
    console.log("getUserInfo", userApi);
    const res = await userApi.getUserInfo();
    if (res.code === 200) {
      let userInfo = res.result;
      dispatch(setUserInfo(userInfo));
    }
  };
  useEffect(() => {
    getUserInfo();
  }, []);
  return (
    <div className="w-full h-full flex justify-between">
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <div className="w-[80px] h-full flex items-center justify-center">
            <NavMenu></NavMenu>
          </div>

          <div className="flex-1">
            <RouterElement></RouterElement>
          </div>
        </BrowserRouter>
      </ThemeProvider>
    </div>
  );
}

export default App;
